<template>
  <div>
    <div class="login">
      <van-tabs class="login-box">
        <van-tab title="美团帐号登录" class="normal-login">
          <div>
            <van-field v-model="username" placeholder="账户名/手机号/Email" />
            <van-field v-model="upwd" placeholder="请输入您的密码" />
          </div>
        </van-tab>
        <van-tab title="手机验证登录" class="phone-login">
          <van-field v-model="tel_registered" placeholder="请输入您的手机号">
            <van-button slot="button" size="small" type="primary">发送验证码</van-button>
          </van-field>
          <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码" />
        </van-tab>
      </van-tabs>
      <div class="btn-wrapper">
        <van-button class="logBtn" type="danger" @click="toCenter">登录</van-button>
      </div>

      <ul class="subline">
        <li>
          <a @click="toRegister">立即注册</a>
        </li>
        <li>
          <a @click="toForget">找回密码</a>
        </li>
      </ul>
      <footer>
        <div class="copyright">
          <span class="copyright">
            © 猫眼电影 客服电话：
            <a data-evt="ft/hotline" href>400-670-5335</a>
          </span>
        </div>
      </footer>
    </div>
    <!-- <div v-if="loadingFlag" class="loadingPlus">
      111
      <van-loading color="#1989fa" class="loading" />
    </div>-->
    <van-popup v-model="loadingFlag">
      <van-loading color="red" class="loading" />
    </van-popup>
  </div>
</template>
<script>
export default {
  data: () => ({
    username: '',
    upwd: '',
    sms: '',
    tel_registered: '',
    loadingFlag: false
  }),
  created () {
    this.$store.state.title = '猫眼电影'
    this.$store.dispatch('changeActive', this.$route.path)
  },
  destroyed () {},

  methods: {
    toRegister () {
      this.$router.push('/account/register')
    },
    toForget () {
      this.$router.push('/account/forget')
    },
    async toCenter () {
      let url = '/login'
      const {
        data: { status, msg, data }
      } = await this.$http.post(url, { uname: this.username, upwd: this.upwd })
      if (status !== -202) {
        this.$Toast(msg)
        data[0].uimg =
          ''
        console.log(data)

        localStorage.setItem('users', JSON.stringify(data))
        // this.$store.state.users.uname = this.username
        // this.$store.state.users.upwd = this.upwd
        // console.log(this.$store.state.users)
        // this.isLogin()
        if (localStorage.getItem('users')) {
          this.$store.state.isLogin = true
        } else {
          this.$store.state.isLogin = false
        }
        setTimeout(() => {
          this.loadingFlag = true
        }, 1100)
        setTimeout(() => {
          this.loadingFlag = false
          this.$router.go(-1)
        }, 2000)
      } else {
        this.$Toast('用户名或密码错误!')
      }
      const users = {
        uname: this.username,
        upwd: this.upwd,
        uimg: ''
      }
      console.log(users)

      // this.$store.dispatch('toCenter', users)
    }
  },
  computed: {},
  beforeRouteLeave (to, from, next) {
    if (to.path === '/account/register' && localStorage.getItem('users')) {
      this.$router.push('/movie/hot')
    }
    next()
  }
}
</script>
<style lang="less" scoped>
.active {
  background: red;
}
.login {
  .login-box {
    color: 0.08rem solid #ffc300;
    .normal-login {
      .input:hover {
        width: 98%;
        height: 40px;
        border-radius: 8px;
        display: block;
        background: rgb(199, 193, 193);
        margin: 4px;
      }
    }
    margin-bottom: 10px;
  }
}
.van-tabs__line {
  color: 0.08rem solid #ffc300;
}
.btn-wrapper {
  width: 100%;

  .logBtn {
    margin-left: 2%;
    width: 96%;
    text-align: center;
    background-color: #df2d2d;
    vertical-align: middle;
    box-sizing: border-box;
    cursor: pointer;
  }
}
.subline {
  display: flex;
  justify-content: space-between;
  padding: 6px;
  li {
    display: inline-block;

    a {
      color: #fe8c00;
    }
  }
}
footer {
  .copyright {
    text-align: center;
    a {
      color: #000;
    }
  }
}
.van-popup {
  background: transparent;
  overflow: hidden;
}
.van-loading__spinner {
  width: 60px;
  height: 60px;
}
// .loadingPlus {
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   background: rgba(255, 255, 255, 0.2);
//   z-index: 9999;
//   .loading {
//     position: absolute;
//     top: 200px;
//     left: 175px;
//     // right: 0px;
//     // bottom: 0px;
//     // margin: auto;
//   }
// }
</style>
